<template>
  <nav class="text-center text-3xl sm:text-7xl mb-3">
    <span class="italic mr-4 text-green-500"> Tailwind CSS With Vue </span>
    <a href="#" class="underline mr-1 hidden sm:inline-block"> Home </a>
    <a href="#" class="underline hidden sm:inline-block"> About </a>
    <button class="sm:hidden">+</button>
  </nav>

  <main
    class="text-center grid grid-cols-1 sm:grid-cols-4 gap-2 text-4xl h-screen"
  >
    <aside class="col-span-1 bg-blue-300">Flexible</aside>
    <section class="col-span-1 sm:col-span-2 bg-blue-300">Lightly</section>
    <aside class="col-span-1 bg-blue-300">Compatible</aside>
  </main>
</template>

<script setup></script>
